<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>氦闪</title>
    <link rel="stylesheet" href="__PUBLIC__/web/css/public.css">
    <link rel="stylesheet" href="__PUBLIC__/web/css/shop.css">
</head>
<body>
<header>
    <include file="Index/header"/>
</header>


<include file="Index/left"/>


<section>
    <div class="ly-content ly-cent">
        <div class="ly-title">
            购物车
        </div>
        <ul class="ly-nav-list">
            <li>商品</li>
            <li>描述</li>
            <li>颜色</li>
            <li>尺码</li>
            <li>数量</li>
            <li>金额</li>
            <li>操作</li>
        </ul>
        <ul class="ly-shop">
            <volist name="cart_list" id="vo">
                <li>
                    <dt>
                        <img src="{$vo.cover_photo|setUrl}"/>
                        <h1>{$vo.product_name}</h1>
                    </dt>
                    <dt>
                        <p>{$vo.describe}</p>
                    </dt>

                    <volist name="vo['detail']" id="sub">
                        <dt><strong class="ly-display">{$sub.attr_name}：</strong>{$sub.detail_name}</dt>
                        <!--<dt><strong class="ly-display">尺码：</strong>X</dt>-->
                    </volist>

                    <dt>
                        {$vo.quantity}
                        <!--<strong class="ly-display">{$vo.quantity}</strong>-->
                        <!--<if condition="$vo.if_online eq 'yes'">


                        <div class="ly-num">
                            <span class="ly-add">+</span>
                            <input type="text" value="{$vo.quantity}" data-price="{$vo.price}" class="ly-number" readonly/>
                            <span class="ly-reduce">-</span>
                        </div>
                            <else/>
                            <div class="ly-num">
                                <span class="" cart_id="{$vo.cart_id}">+</span>
                                <input type="text" value="{$vo.quantity}" data-price="{$vo.price}" class="ly-number" readonly/>
                                <span class="" cart_id="{$vo.cart_id}">-</span>
                            </div>
                        </if>-->

                    </dt>
                    <dt>￥<span class="ly-price">{$vo.price}</span></dt>
                    <dt>
                        <if condition="$vo.if_online eq 'yes'">
                            <if condition="$vo.number eq '' ">
                                <a  cart_id="{$vo.cart_id}" class="number_by_chance js-ajax-dialog-btn">在线选号</a>
                                <else/>
                                <a href="javascript:;" style="background: #333;color: #fff; padding: 2px 5px;" class="">选号成功</a>
                            </if>

                            <else/>
                            <a href="javascript:;" style="text-decoration:line-through" class="">在线选号</a>
                        </if>
                        <a href="javascript:;" class="ly-delete" cart_id="{$vo.cart_id}">删除</a>

                    </dt>
                </li>
            </volist>
            <!--<li>
                <dt>
                    <img src="__PUBLIC__/web/images/img_show.png"/>
                    <h1>局部印花衬衫局部印花衬衫局部印花衬衫</h1>
                </dt>
                <dt>
                    <p>棉及亚麻混纺 T 恤款垂性衬衫，罗纹圆领，短袖。正面照片印花。胸前饰有口袋。</p>
                </dt>

                <dt><strong class="ly-display">颜色：</strong>黑</dt>
                <dt><strong class="ly-display">尺码：</strong>X</dt>
                <dt>
                    <div class="ly-num">
                        <span class="ly-add">+</span>
                        <input type="text" value="1" data-price="666.00" class="ly-number" readonly/>
                        <span class="ly-reduce">-</span>
                    </div>
                </dt>
                <dt>￥<span class="ly-price">666.00</span></dt>
                <dt>
                    <a href="javascript:;" class="">在线选号</a>
                    <a href="javascript:;" class="ly-delete">删除</a>

                </dt>
            </li>-->

        </ul>

        <div class="ly-shop-over">
            <p>折扣券码：<input type="text" class="ly-input" id="sale_code" name="sale_code" placeholder="选填"/></p>
            <p>商品数量： <b id="Total">0</b></p>
            <p> 预计寄送费用: <span>¥ 0.00</span></p>
            <p> 总金额（含税）: <span>¥ <b id="Price">0.00</b></span></p>
        </div>

        <div class="ly-line">
            <a href="{:U('Index/home')}" class="ly-aglin">继续购买</a>
            <a href="javascript:;" class="ly-submit">立即购买</a>
        </div>
    </div>
    <include file="Index/footer"/>
</section>

<div class="ly-menu-nav" data-id="1">
    <img src="__PUBLIC__/web/images/icon_menu.png"/>
</div>
</body>
<script src="__PUBLIC__/web/js/jquery.min.js"></script>
<script src="__PUBLIC__/web/js/public.js"></script>

<script>
    var total = 0;
    var price = 0;

    // 获取数量
    function lyNumber() {
        total = 0;
        $(".ly-number").each(function () {
            total += parseInt($(this).val());
        });
    }

    // 获取总价价格
    function lyPrice() {
        price = 0;
        $(".ly-price").each(function () {
            var pri = parseInt($(this).html() * 100);
            price += pri;
        });
    }


    lyNumber();
    lyPrice();
    lyOver();

    function lyOver() {
        $("#Total").html(total);
        $("#Price").html((price / 100).toFixed(2));
    }
    function changeCart(cart_id, number) {
        var commit = true;
        $.ajax({
            url: "{:U('editCart')}",
            dataType:"json",
            data:{cart_id:cart_id, number:number},
            type:'POST',
            async:true,
            beforeSend:function(){

//                $("body").showLoading();
            },
            success:function(rst){
                console.log(rst);
                if(rst.code == '200') {
                    commit = true;
                } else {
                    alert(rst.mark);
                    commit = false;
                }
            },
            error: function(){
//                $("body").hideLoading();
//                    alert("错误");
            }

        });
        return commit;
    }

    // 加
    $(".ly-add").on("click", function () {
        var cart_id = $(this).attr('cart_id');
        var num = parseInt($(this).siblings(".ly-number").val());
        var price = $(this).siblings(".ly-number").attr("data-price");
        num++;
        // alert(num);
        var commit = changeCart(cart_id, num);
        // console.log(commit);
        if(commit) {
            $(this).siblings(".ly-number").val(num);
            var priceNum = parseInt(price * 100) * num / 100;
            $(this).parents("li").find(".ly-price").html(priceNum.toFixed(2));
            lyNumber();
            lyPrice();
            lyOver();
        }

    })

    // 减
    $(".ly-reduce").on("click", function () {
        var cart_id = $(this).attr('cart_id');
        var num = parseInt($(this).siblings(".ly-number").val());
        var price = $(this).siblings(".ly-number").attr("data-price");
        if (num == 1) {
            return
        } else {
            num--;
            // alert(num);
            var commit = changeCart(cart_id, num);
            // alert(commit);
            if(commit) {
                $(this).siblings(".ly-number").val(num);
                var priceNum = parseInt(price * 100) * num / 100;
                $(this).parents("li").find(".ly-price").html(priceNum.toFixed(2));
                lyNumber();
                lyPrice();
                lyOver();
            }

        }
    })

    $(".ly-submit").on("click",function () {
        var sale_code = $("#sale_code").val();
        window.location.href = "{:U('address')}"+'/sale_code/'+sale_code;
    })
    $('.ly-delete').click(function () {
        if(confirm('确定删除吗？')) {
            var cart_id = $(this).attr('cart_id');
            $.ajax({
                url: "{:U('delCart')}",
                dataType:"json",
                data:{cart_id:cart_id},
                type:'POST',
                async:true,
                beforeSend:function(){

//                $("body").showLoading();
                },
                success:function(rst){
                    console.log(rst);
                    if(rst.code == '200') {
                        window.location.reload();
                    } else {
                        alert(rst.msg);
                    }
                },
                error: function(){
//                $("body").hideLoading();
//                    alert("错误");
                }

            });
        }
    })

    $('.number_by_chance').click(function () {
        if(confirm('确定选号吗？')) {
            var cart_id = $(this).attr('cart_id');
            $.ajax({
                url: "{:U('numByChance')}",
                dataType:"json",
                data:{cart_id:cart_id},
                type:'POST',
                async:true,
                beforeSend:function(){

//                $("body").showLoading();
                },
                success:function(rst){
                    console.log(rst);
                    if(rst.code == '200') {
                        window.location.reload();
                    } else {
                        alert(rst.msg);
                    }
                },
                error: function(){
//                $("body").hideLoading();
//                    alert("错误");
                }

            });
        }
    })
</script>
</html>





